<template>
  <div class="hello">
    <button @click="isShow = !isShow"> 隐藏/显示</button>
    <transition-group 
    name="animate__animated animate__bounce"
    enter-active-class="animate__bounceInLeft"
    leave-active-class="animate__backOutLeft">
      <h1 v-show="isShow" key="1"> Hello </h1>
      <h1 v-show="!isShow" key="2"> Hello </h1>
    </transition-group>
    
  </div>
</template>

<script>
import 'animate.css'    
export default {
  name: 'HelloWorld',
  data() {
    return {
      isShow:true,
    }
  },
}
</script>


<style scoped>
h1{
  background-color: purple;
}
/* .akk-enter, .akk-leave-to{
  transform: translateX(-100%);
}
.akk-enter.to, .akk-leave{
  transform: translateX(0px);
}
.akk-enter-active{
   transition: 1s linear;
}
.akk-leave-active{
  transition: 1s linear;
} */



</style>